import React from "react"
import './HOC.css'
function HOC(WrapperdComponent) {
  return class HOC extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        value: "",
      }
    }
    changeInput = (element) => {
      let value = element.target.value
      console.log('value:', value);
      this.setState({
        value
      })
    }

    render() {
      const newProps = {
        value: this.state.value,
        onInput: this.changeInput
      }
      return (
        <div className="HOCExplain">
          <div className='header'>
            <span>开启高阶组件学习</span>
          </div>
          <div className='container'>
            <WrapperdComponent {...newProps} />
          </div>
          <div className="footer">学无止境</div>
        </div>
      )
    }
  }
}

export default HOC